<template>
  <div class="app-container custom">
    <el-row :gutter="20">
      <el-col :span="20" style="">
        <div style="width: 100%;border: 1px solid #d7dae2;padding: 10px;margin-bottom: 5px;">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="60px" :rules="rules">
          <el-form-item label="时间" label-width="40px">
            <WeekTimePicker type="datetime" v-model="queryParams.startTime" format="yyyy-MM-dd HH:mm" :clearable="false" style="width: 150px" />
            <span style="margin: 0px 6px;">~</span>
            <WeekTimePicker type="datetime" v-model="queryParams.endTime" format="yyyy-MM-dd HH:mm" :clearable="false" style="width: 150px" />
          </el-form-item>
          <el-form-item label="制造区域" prop="area">
            <el-select v-model="queryParams.area" placeholder="请选择制造区域"
              @change="getProductionTypeIdList(queryParams.area)" clearable style="width: 120px">
              <el-option v-for="dict in factoryAreaIdOptions" :key="dict.value" :label="dict.label" :value="dict.value"  />
            </el-select>
          </el-form-item>
          <el-form-item label="制造类型" prop="process">
            <el-select v-model="queryParams.process" placeholder="请选择制造类型"
              @change="getMachineTypeIdList(queryParams.process)" clearable style="width: 120px">
              <el-option v-for="dict in listProductionTypeOptions" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="父设备" prop="machineGroup">
            <el-select v-model="queryParams.machineGroup" placeholder="请选择父设备"
              @change="getByToyMachineIdMachineIdList(queryParams.machineGroup)" clearable style="width: 150px">
              <el-option v-for="dict in listMachineTypeIdListOptions" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-row :gutter="0" class="mb8" style="height: 20px;">
          <el-radio-group v-model="radioVal" size="small" @change="radioChange" style="margin-bottom: 10px;">
            <el-radio-button label="全部履历"></el-radio-button>
            <el-radio-button label="故障(Down)" ></el-radio-button>
            <el-radio-button label="保养(PM)"></el-radio-button>
            <el-radio-button label="待机(IDLE)"></el-radio-button>
            <el-radio-button label="离线(OFF)"></el-radio-button>
          </el-radio-group>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList">
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['ept:history:export']">导出</el-button>
              <el-button
                type="success"
                plain
                icon="Sort"
                @click="isShowMethods"
                >状态分析</el-button>
            </el-form-item>
          </right-toolbar>
        </el-row>
      </div>
      <div style="width: 100%;border: 1px solid #d7dae2;padding: 10px; fontSize: 11px">
        <div style=" width: 100%;">
          <div style=" width: 100%;height: 26px;display:flex; background-color:rgb(237, 237, 237)">
            <img src="@/assets/images/legend.jpg" style="display: block; width: 100%; height: 25px; float: right;" />
            <!-- <div style=" line-height: 26px; width: 40px; margin-left: 10px;">图示:</div>
            <img src="@/assets/images/legend.jpg" style="display: block; width: calc(100% - 40px); margin: 0 auto; float: right;" /> -->
          </div>

        </div>
        <div class="wrap-norep" :style="{height: echartsHeight+'px'}">

          <div id="container" v-loading="loading">
          </div>
        </div>
      </div>

      </el-col>
      <el-col :span="4" >
        <!-- <el-card style="width:100%"> -->
          <div style="border: 1px solid #d7dae2; padding: 10px; height: 100%;">
            <!-- <Tree :data="machineList" show-checkbox></Tree> -->
            <el-tree
              :data="machineList"
              node-key="id"
              :props="{ children: 'children', label: 'id'}"
              show-checkbox
              class="tree"
              ref="tree"
              :default-expanded-keys="expandedKeys"
              :default-checked-keys="checkedKeys"
              check-strictly
              @getCheckedKeys="getCheckedKeys"/>
            <!-- <el-table  @selection-change="handleSelectionChange" v-loading="loading" :data="machineList" row-key="machineId" :default-expand-all="isExpandAll"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="height: calc(100% - 75px)">
              <el-table-column type="selection" width="30" align="center" />
              <el-table-column label="选择设备" prop="id" width="200" />

            </el-table> -->
          </div>
        <!-- </el-card> -->
      </el-col>
    </el-row>

    <span class="table_title" v-show="isClickShow">※ 稼动发生时间（分）</span>
     <t-ag-grid
        v-show="isClickShow"
        style="margin: 5px 0px;"
        :style="{height: summaryHeight}"
        :column-defs="columnSummary"
        :row-data="tableDataSummary"
        :row-buffer="20"
        align="center"
        :defaultColDef = "{
            suppressMenu:true
        }"
        header-align="center"
        />

      <span class="table_title" v-show="isClickShow">※ 稼动发生比例（%）</span>
      <t-ag-grid
        v-show="isClickShow"
        style="margin-bottom: 10px; margin-top: 5px;"
        :style="{height: summaryHeight}"
        :column-defs="columnSummaryPercent"
        :row-data="tableDataSummaryPercent"
        :row-buffer="20"
        align="center"
        :defaultColDef = "{
            suppressMenu:true
        }"
        header-align="center"
        />

    <t-ag-grid
          :style="{height}"
          style="margin-top: 10px;"
          :column-defs="column"
          :row-data="historyList"
          :row-buffer="20"
          row-selection="multiple"
          :suppress-row-click-selection="true"
          :row-multi-select-with-click="true"
          align="center"
          :defaultColDef = "{
              menuTabs: ['filterMenuTab', 'columnsMenuTab']
          }"
          header-align="center"
          />

          <div style="height: 30px;">
            <pagination class="pagination" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
        @pagination="getList" />
          </div>

    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="historyRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="父设备" prop="machineGroup">
          <el-input v-model="form.machineGroup" placeholder="请输入父设备" />
        </el-form-item>
        <el-form-item label="设备id" prop="machineId">
          <el-input v-model="form.machineId" placeholder="请输入设备id" />
        </el-form-item>
        <el-form-item label="变更事件" prop="eventName">
          <el-input v-model="form.eventName" placeholder="请输入变更事件" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-input v-model="form.endTime" placeholder="请输入结束时间" />
        </el-form-item>
        <el-form-item label="持续时长" prop="keepTime">
          <el-input v-model="form.keepTime" placeholder="请输入持续时长" />
        </el-form-item>
        <el-form-item label="rcode" prop="rcode">
          <el-input v-model="form.rcode" placeholder="请输入rcode" />
        </el-form-item>
        <el-form-item label="rcode描述" prop="description">
          <el-input v-model="form.description" placeholder="请输入rcode描述" />
        </el-form-item>
        <el-form-item label="备注信息" prop="remak">
          <el-input v-model="form.remak" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item label="报警号" prop="alarmIds">
          <el-input v-model="form.alarmIds" placeholder="请输入报警号" />
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model="form.level" placeholder="请输入等级" />
        </el-form-item>
        <el-form-item label="来源" prop="fromId">
          <el-input v-model="form.fromId" placeholder="请输入来源" />
        </el-form-item>
        <el-form-item label="父设备" prop="topid">
          <el-input v-model="form.topid" placeholder="请输入父设备" />
        </el-form-item>
        <el-form-item label="报警id" prop="alarmId">
          <el-input v-model="form.alarmId" placeholder="请输入报警id" />
        </el-form-item>
        <el-form-item label="报警等级" prop="alarmLevel">
          <el-input v-model="form.alarmLevel" placeholder="请输入报警等级" />
        </el-form-item>
        <el-form-item label="发报警时间" prop="alarmSendTime">
          <el-input v-model="form.alarmSendTime" placeholder="请输入发报警时间" />
        </el-form-item>
        <el-form-item label="读报警时间" prop="alarmReadTime">
          <el-input v-model="form.alarmReadTime" placeholder="请输入读报警时间" />
        </el-form-item>
        <el-form-item label="消报警时间" prop="alarmEndTime">
          <el-input v-model="form.alarmEndTime" placeholder="请输入消报警时间" />
        </el-form-item>
        <el-form-item label="报警文本" prop="alarmText">
          <el-input v-model="form.alarmText" placeholder="请输入报警文本" />
        </el-form-item>
        <el-form-item label="读报警损失" prop="readlossTime">
          <el-input v-model="form.readlossTime" placeholder="请输入读报警损失" />
        </el-form-item>
        <el-form-item label="消报警损失" prop="clearLossTime">
          <el-input v-model="form.clearLossTime" placeholder="请输入消报警损失" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="History">
  import { listHistory, getHistory, delHistory, addHistory, updateHistory } from "@/api/ept/history"
  import moment from 'moment'
  import request from '@/utils/request'
  import * as echarts from 'echarts'
  import { allColumn, downColumn, pmColumn, queryTableData, columnSummary, columnSummaryPercent } from './config'
  import { listEptTimeHis } from "@/api/timeAnalysis/eptTimeHistory"
  import { useRoute } from 'vue-router'
  import { onMounted } from "vue"
  const route = useRoute()

  const { proxy } = getCurrentInstance()
  const tree = ref()
  const radioVal = ref('全部履历')
  const expandedKeys = ref([])
  const checkedKeys = ref([])
  const height = ref('calc(100% - 270px)')
  const column = ref([])
  column.value = allColumn

  const isClickShow = ref(false)
  const isShow = ref(false)
  const summaryHeight = ref('0px')
  const tableDataSummary = ref([])
  const tableDataSummaryPercent = ref([])

  const historyList = ref([])
  const open = ref(false)
  const loading = ref(false)
  const showSearch = ref(true)
  const ids = ref([])
  const single = ref(true)
  const multiple = ref(true)
  const total = ref(0)
  const title = ref("")
  const echartsHeight = ref(60)
  const data = reactive({
    form: {},
    queryParams: {
      area: '层前',
      process: null,
      pageNum: 1,
      pageSize: 1000,
      startTime: moment().subtract(1, 'days').format('YYYY-MM-DD 08:30:00'),
      endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      machineGroup: null,
      machineId: null,
      eventName: null,
      keepTime: null,
      shutdownType: null,
      preEptStatus: null,
      eptStatus: null,
      hardwareStatus: null,
      processStatus: null,
      rcode: null,
      description: null,
      remak: null,
      alarmIds: null,
      level: null,
      fromId: null,
      topid: null,
      modelType: null,
      machineType: null,
      alarmId: null,
      alarmLevel: null,
      alarmSendTime: null,
      alarmReadTime: null,
      alarmEndTime: null,
      alarmText: null,
      readlossTime: null,
      clearLossTime: null
    },
    rules: {
      machineGroup: [
        { required: true, message: "父设备不能为空", trigger: "blur" }
      ]
    }
  })

  const targetData = ref()

  const machineList = ref([])
  const factoryIdOptions = ref([])
  const factoryAreaIdOptions = ref([])
  const listProductionTypeOptions = ref([])
  const listMachineTypeIdOptions = ref([])
  const listMachineTypeIdListOptions = ref([])
  const MachineIdListOptions = ref([])
  const EcharTitleNameList = ref([])
  const eptStatusListOptions = ref([])
  const descriptionListOptions = ref([])
  const echartsList = ref([])

  const radioChange = (val) => {
    if(val === '全部履历') {
      column.value = allColumn
    } else if(val === '故障(Down)') {
      column.value = downColumn
    } else {
      column.value = pmColumn
    }
    getList()
  }

  const getFactoryIdListInfo = () => {
    return request({
      url: '/parameter/getFactoryIdList/',
      method: 'get'
    })
  }
  const getFactoryIdList = () => {
    factoryIdOptions.value = []
    getFactoryIdListInfo().then((res) => {
      res.rows.forEach(item => {
        factoryIdOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }
  const getEchartsList = () => {
    return request({
      url: '/ept/history/getmachineListByMachineId',
      method: 'get',
      params: queryParams.value
    })
  }

  onActivated(() => {
    if(history?.state?.dataTime && history?.state?.machineTypeId){
      queryParams.value.machineGroup = history.state.machineTypeId
      getByToyMachineIdMachineIdList(queryParams.value.machineGroup, true)
      queryParams.value.startTime = moment(history.state.dataTime).format('YYYY-MM-DD 08:30:00')
      if(moment(moment(history.state.dataTime).format('YYYY-MM-DD 08:30:00')).unix() < moment(moment().format('YYYY-MM-DD HH:mm:ss')).unix() && moment(moment().format('YYYY-MM-DD HH:mm:ss')).unix() < moment(moment(history.state.dataTime).add(1, 'days').format('YYYY-MM-DD 08:30:00')).unix()) {
        queryParams.value.endTime = moment().format('YYYY-MM-DD HH:mm:ss')
      } else {
        queryParams.value.endTime = moment(history.state.dataTime).add(1, 'days').format('YYYY-MM-DD 08:30:00')
      }
    }
  })

  const getEchartsListInfo = () => {
    loading.value = true
    echartsList.value = []
    getEchartsList().then((res) => {
      loading.value = false
      res.rows[res.rows.length-1].barWidth = 30
      echartsHeight.value = res.rows[0].data.length * 40 + 50
      echartsList.value = res.rows
      showEcharts(echartsHeight.value)
    })
  }
  const getFactoryAreaIdListInfo = (factoryId) => {
    return request({
      url: '/parameter/getFactoryAreaIdList/?factoryId=' + factoryId,
      method: 'get'
    })
  }
  const getFactoryAreaIdList = (factoryId) => {
    factoryAreaIdOptions.value = []
    getFactoryAreaIdListInfo(factoryId).then((res) => {
      res.rows.forEach(item => {
        factoryAreaIdOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }
  getFactoryAreaIdList("H05")

  const getProductionTypeIdListInfo = (factoryAreaId) => {
    return request({
      url: '/parameter/getProductionTypeIdList/?factoryAreaId=' + factoryAreaId,
      method: 'get'
    })
  }
  const getProductionTypeIdList = (factoryAreaId) => {
    listProductionTypeOptions.value = []
    getProductionTypeIdListInfo(factoryAreaId).then((res) => {
      res.rows.forEach(item => {
        listProductionTypeOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  onMounted(() => {

    getProductionTypeIdList('层前')

  })

  const getgetMachineTypeIdListInfo = (productionTypeId) => {
    return request({
      url: '/parameter/getMachineGroupByMachineTypeId/?machineType=' + productionTypeId,
      method: 'get'
    })
  }
  const getMachineTypeIdList = (productionTypeId) => {
    listMachineTypeIdListOptions.value = []
    queryParams.value.machineGroup = null
    getgetMachineTypeIdListInfo(productionTypeId).then((res) => {
      res.rows.forEach(item => {
        listMachineTypeIdListOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }
  const getlistMachineInfo = (machineTypeId) => {
    return request({
      url: '/parameter/getMachineIdList/?machineTypeId=' + machineTypeId,
      method: 'get'
    })
  }
  const getlistMachineGroupOptions = (machineTypeId) => {
    listMachineTypeIdOptions.value = []
    getlistMachineInfo(machineTypeId).then((res) => {
      res.rows.forEach(item => {
        listMachineTypeIdOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  const getByToyMachineIdMachineIdListtInfo = (groupTeam) => {
    return request({
      url: '/SYSConfig/machine/getOeeBMachineList',
      method: 'get',
      params: {
        groupTeam: groupTeam
      }
    })
  }
  const getByToyMachineIdMachineIdList = (machineGroup, isJump) => {
    machineList.value = []
    checkedKeys.value = []
    if (machineGroup) {
      getByToyMachineIdMachineIdListtInfo(machineGroup).then((res) => {
        res.data.forEach((item) => {
          if(item.isFlag === 'Y'){
            checkedKeys.value.push(item.id)
          }

          if(item.pid === '0'){
            expandedKeys.value.push(item.id)
          }
        })
        machineList.value = proxy.handleTree(res.data, "machineId", "pid")
        if(isJump){
          handleQuery('', true)
        }
      })
    }
  }
  const getEcharsXTitleNameListtInfo = (machineGroup, machineId) => {
    return request({
      url: '/ept/history/getEcharsXTitleNameList/?machineGroup=' + machineGroup+'&machineIds='+machineId,
      method: 'get'
    })
  }
  const getEcharsXTitleNameList = (machineGroup, machineId) => {

    EcharTitleNameList.value = []
    getEcharsXTitleNameListtInfo(machineGroup, machineId).then((res) => {
      EcharTitleNameList.value =  res.rows
    })
  }

  const getEptStatusListOptionsListtInfo = () => {
    return request({
      url: '/parameter/getmachineStatus/',
      method: 'get'
    })
  }
  const getEptStatusListOptionsList = () => {
    eptStatusListOptions.value = []
    getEptStatusListOptionsListtInfo().then((res) => {
      res.rows.forEach(item => {
        eptStatusListOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  getEptStatusListOptionsList()
  const getDescriptionListOptionsInfo = (machineStatus) => {
    return request({
      url: '/parameter/getDescription/?machineStatus=' + machineStatus,
      method: 'get'
    })
  }
  const getDescriptionListOptionsList = (machineStatus) => {
    if (machineStatus.length === 0) {
      return
    }
    descriptionListOptions.value = []
    queryParams.value.description = null
    getDescriptionListOptionsInfo(machineStatus).then((res) => {
      res.rows.forEach(item => {
        descriptionListOptions.value.push({
          label: item.description,
          value: item.descriptionCode
        })
      })
    })
  }
  const { queryParams, form, rules } = toRefs(data)

  const showEcharts = (h) => {
    let dom = document.getElementById('container')

    dom.style.height = h+'px'
    echarts.dispose(dom)
    let myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    })

    myChart = echarts.getInstanceByDom(document.getElementById("container"))

    const resizeObserver = new ResizeObserver((entries, b) => {
      if(myChart){
        myChart.resize()
      }
    })
    resizeObserver.observe(document.getElementById("container"))

    if (myChart == null) {
      myChart = echarts.init(document.getElementById("container"))
    }

    let option = {

      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          if(params?.data){
            return params.data.detail
          }
        },
        position: function (point) {
          var pointX = point[0]
          var pointY = point[1]
          return [pointX + 20, pointY]
        }
      },
      grid: {
        left: '1%',
        right: '40px',
        bottom: '1%',
        top: '3%',
        containLabel: true
      },
      yAxis: {
        type: 'category',
        splitLine: {
          show: false
        },
        data: EcharTitleNameList.value,
        show: true
      },
      xAxis: {
        name: '',
        nameLocation: 'start',
        nameGap:50,
        nameTextStyle: {
          verticalAlign: 'bottom',
          backgroundColor: '#ddd',
          lineHeight: 30,
          fontSize: 15,
          padding: [0, 5, 0, 5]
        },
        position: 'top',
        type: 'value',
        axisTick: {
          alignWithLabel: false
        },
        min: echartsDataTimeMin,
        max: echartsDataTimeMax,
        axisLabel: {
          color: '#333', // 坐标轴文字颜色
          formatter: function (value, index) {
            let date = new Date(value * 1000)
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            let D = (date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ')
            let h = (date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':')
            let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
            let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return M + D + h + m
          }
        },
        axisPointer: {
          label:{ formatter: function (value, index) {
            let date = new Date(value.value * 1000)
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            let D = (date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ')
            let h = (date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':')
            let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':')
            let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return M + D + h + m + s
          }
          },
          show: true
        }
      },
      series: echartsList.value
    }
    myChart.setOption(option)
  }

  let myChart = null
  onMounted(() => {
    // showEcharts()
  })
  var echartsDataTimeMax = 0
  var echartsDataTimeMin = 0
  function getList() {
    queryParams.value.startTime = moment(queryParams.value.startTime).format('YYYY-MM-DD HH:mm:ss')
    queryParams.value.endTime = moment(queryParams.value.endTime).format('YYYY-MM-DD HH:mm:ss')
    echartsDataTimeMax= moment(queryParams.value.endTime).unix() > moment().unix() ? moment().unix() : moment(queryParams.value.endTime).unix()
    echartsDataTimeMin = moment(queryParams.value.startTime).unix()

    queryParams.value.eptStatus = radioObj[radioVal.value]

    queryParams.value.model = 'N'

    listEptTimeHis(queryParams.value).then(response => {
      historyList.value = []
      response.rows.forEach((item) => {
        item.keepTime = Number(item.keepTime)
        historyList.value.push(item)
      })
      total.value = response.total
    })
  }

  const isShowMethods = () => {
    if(isShow.value){
      isClickShow.value = !isClickShow.value
    }
  }

  function cancel() {
    open.value = false
    reset()
  }

  function reset() {
    form.value = {
      machineGroup: null,
      machineId: null,
      eventName: null,
      createTime: null,
      endTime: null,
      keepTime: null,
      shutdownType: null,
      preEptStatus: null,
      eptStatus: null,
      hardwareStatus: null,
      processStatus: null,
      rcode: null,
      description: null,
      remak: null,
      alarmIds: null,
      level: null,
      fromId: null,
      topid: null,
      modelType: null,
      machineType: null,
      alarmId: null,
      alarmLevel: null,
      alarmSendTime: null,
      alarmReadTime: null,
      alarmEndTime: null,
      alarmText: null,
      readlossTime: null,
      clearLossTime: null
    }
    proxy.resetForm("historyRef")
  }

  const getJiaDong = () => {
    queryParams.value.startTime = moment(queryParams.value.startTime).format('YYYY-MM-DD HH:mm:ss')
    queryParams.value.endTime = moment(queryParams.value.endTime).format('YYYY-MM-DD HH:mm:ss')

    queryParams.value.eptStatus = null

    queryParams.value.model = 'N'

    queryTableData(queryParams.value).then(({ rows }) => {
      isShow.value = true
      console.log(rows[0][0])
      tableDataSummary.value = rows[0][0]
      tableDataSummaryPercent.value = rows[0][1]
      summaryHeight.value = (rows[0][0].length + 1) * 32 + 3 + 'px'
    })
  }

  function handleQuery(_, isJump) {
    proxy.$refs.queryRef.validate(valid => {
      if(valid){

        if(moment(queryParams.value.endTime).subtract(3, 'days')>moment(queryParams.value.startTime)){
          proxy.$modal.alertWarning('最多查询 3 天的数据')
          return
        }

        queryParams.value.pageNum = 1
        queryParams.value.machineId = isJump ? checkedKeys.value : tree.value.getCheckedKeys()
        ids.value = tree.value.getCheckedKeys()
        getEcharsXTitleNameList('', queryParams.value.machineId)
        getList()
        getEchartsListInfo()

        getJiaDong()
      }
    })

  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef")
    handleQuery()
  }

  function handleSelectionChange(selection) {

    ids.value = selection.map(item => item.id)
    queryParams.value.machineId = selection.map(item => item.id)
    EcharTitleNameList.value = selection.map(item => item.id)
  }

  function submitForm() {
    proxy.$refs["historyRef"].validate(valid => {
      if (valid) {
        if (form.value.machineGroup != null) {
          updateHistory(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功")
            open.value = false
            getList()
          })
        } else {
          addHistory(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功")
            open.value = false
            getList()
          })
        }
      }
    })
  }

  const apiObj = {
    '全部履历': 'timeAnalysis/machineHistory/exportOeeBMachineWorkHistoryList',
    '故障(Down)': 'timeAnalysis/machineHistory/OeeBMachineWorkHistoryDownList',
    '保养(PM)': 'timeAnalysis/machineHistory/OeeBMachineWorkHistoryIdleList',
    '待机(IDLE)': 'timeAnalysis/machineHistory/OeeBMachineWorkHistoryIdleList',
    '离线(OFF)': 'timeAnalysis/machineHistory/OeeBMachineWorkHistoryIdleList'
  }

  const radioObj = {
    '全部履历': null,
    '故障(Down)': 'DOWN',
    '保养(PM)': 'PM',
    '待机(IDLE)': 'IDLE',
    '离线(OFF)': 'OFF'
  }

  function handleExport() {
    queryParams.value.model = 'N'
    proxy.download(apiObj[radioVal.value], {
      ...queryParams.value,
      eptStatus: radioObj[radioVal.value]
    }, `history_${new Date().getTime()}.xlsx`)
  }
</script>
<style scoped lang="less">

.custom {
  overflow-y: scroll;

  .pagination {
    position: relative;
    right: 0;
    float: right;
  }
  .RUN {
    background-color: rgb(107, 238, 107);
  }

  .IDLE {
    background-color: yellow;
  }

  .DOWN {
    background-color: red;
  }

  .OTHER {
    background-color: grey;
  }

  .wrap {
    margin-top: 20PX;
  }
}

:deep(.el-tree-node__content) {
  height: 30px;
}

// :deep(.tree) {
//     color: #595959;
//     background: transparent;

//     /* 树形结构节点添加连线 */
//     .el-tree-node {
//         position: relative;
//         padding-left: 2px;

//         .el-tree-node__content {
//             height: 30px;
//             padding-left: 0 !important;

//         }

//         &:last-child:before {
//             height: 40px;
//         }

//         &:before {
//             content: "";
//             left: -4px;
//             position: absolute;
//             right: auto;
//             border-width: 1px;
//             border-left: 1px solid #BBBBBB;
//             bottom: 0px;
//             height: 100%;
//             top: -26px;
//             width: 1px;
//         }

//         &:after {
//             content: "";
//             left: -4px;
//             position: absolute;
//             right: auto;
//             border-width: 1px;
//             border-top: 1px solid #BBBBBB;
//             height: 15px;
//             top: 14px;
//             width: 18px;
//         }

//     }

//     .el-tree-node__children {
//         padding-left: 12px;
//     }
// }

/*
.wrap-norep {
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
} */

:deep(.custom-orange) {
  background-color: #ffe699;
}

:deep(.custom-blue) {
  background-color: #bdd7ee;
}

.table_title {
    color: blue;
    font-size: 16px;
    font-weight: 600;
  }
</style>